<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Orientation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

    <script type="text/javascript" language="javascript">

       function loadHandler()
       {
           document.getElementById("load").innerHTML = getOrientationString();
       }
			 function unloadHandler() {}
       function orientHandler()
       {
           document.getElementById("orient").innerHTML = getOrientationString();
       }
       function resizeHandler()
       {
           document.getElementById("resize").innerHTML = getOrientationString();
       }
       function manualHandler()
       {
            document.getElementById("manual").innerHTML =  getOrientationString();
       }
      
       function getOrientationString()
       {
           var displayStr = "";

           switch(window.orientation)
           {
               case 0:
                   displayStr += "0 (Portrait)";
               break;

               case -90:
                   displayStr += "-90 (Landscape)";
               break;

               case 90:
                   displayStr += "90 (Landscape)";
               break;

               case 180:
                   displayStr += "180 (Portrait - upside down - SHOULD NEVER HAPPEN!)";
               break;
               
               default:
                    displayStr += "unsupported";
               break;

           }
           return displayStr;
       }

    </script>
  </head>
  <body onload="loadHandler();" onunload="unloadHandler();" onresize="resizeHandler();" onorientationchange="orientHandler();">
     <h2 style="text-decoration: underline;">Tracking Orientation</h2>
     Load Events: <span id="load">unknown</span><br/>
     Resize Events: <span id="resize">unknown</span><br/>
     Orient Events: <span id="orient">unknown</span><br/>
     Manual State:  <span id="manual">unknown</span><br/>
     <a href="static.html">link out</a><br/>
     <a href="javascript:manualHandler()">Read window.orientation</a>
  </body>

</html>
